<p-dialog #browseDialog
  i18n-header header='Browse Blueprints'
  [(visible)]="visible"
  [modal]="true"
  [dismissableMask]="true"
  [closable]="true"
  [focusOnShow]="false"
  [maximizable]="false"
  [draggable]="false"
  [resizable]="false"
  [contentStyle]=""
  >

  <div>
    <input class="float-input" type="text" size="30"
      i18n-placeholder placeholder="Search"
      [(ngModel)]="filterName"
      (ngModelChange)="filterNameSubject.next($event)" pInputText >
  </div>



  <p-checkbox [(ngModel)]="getDuplicates" binary="true" i18n-label label="Show duplicate blueprints" (onChange)="duplicateChange()"></p-checkbox>
  <br>
  <p-checkbox *ngIf="filterUserName != null" [(ngModel)]="filterUser" binary="true" i18n-label label="Show only blueprints by {{filterUserName}}" (onChange)="filterUserChange()"></p-checkbox>

  <div #scrollable class="scrollable">

    <div class="blueprint-line" *ngFor="let item of blueprintListItems">
      <div class="thumbnail">
        <img *ngIf="isReal(item.thumbnail)" class="clickable-image" [src]=item.thumbnail (click)="openBlueprint(item)">
        <svg *ngIf="item.thumbnail == 'svg'" width="200" height="200" version="1.1" viewBox="0 0 200 200" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
          <rect width="200" height="200" fill="#007aff"/>
          <path fill="#fff" d="m114.92 91.943 9.4524-6.3017c4.671-3.1163 7.4625-8.3331 7.4625-13.944v-11.499c4.1094-1.4649 7.0755-5.355 7.0755-9.9637v-7.0755c0-1.9554-1.5823-3.5378-3.5378-3.5378h-70.755c-1.9554 0-3.5378 1.5823-3.5378 3.5378v7.0755c0 4.6087 2.966 8.4989 7.0755 9.9637v11.499c0 5.6106 2.7915 10.827 7.4625 13.944l9.4524 6.3017c2.7017 1.8033 4.3116 4.8161 4.3116 8.0566 0 3.2406-1.6099 6.2533-4.3116 8.0566l-9.4524 6.3017c-4.671 3.1163-7.4625 8.3331-7.4625 13.944v11.499c-4.1094 1.4649-7.0755 5.355-7.0755 9.9637v7.0755c0 1.9554 1.5823 3.5378 3.5378 3.5378h70.755c1.9554 0 3.5378-1.5823 3.5378-3.5378v-7.0755c0-4.6087-2.966-8.4988-7.0755-9.9637v-11.499c0-5.6106-2.7915-10.827-7.4625-13.944l-9.4524-6.3017c-2.7017-1.8033-4.3116-4.8161-4.3116-8.0566 0-3.2406 1.6099-6.2533 4.3116-8.0566zm-11.387 8.0566c0 5.6106 2.7915 10.827 7.4625 13.944l9.4524 6.3017c2.7017 1.8033 4.3116 4.8161 4.3116 8.0566v10.849h-49.529v-10.849c0-3.2406 1.6099-6.2533 4.3116-8.0566l9.4524-6.3017c4.671-3.1163 7.4625-8.333 7.4625-13.944 0-5.6106-2.7915-10.827-7.4625-13.944l-9.4524-6.3017c-2.7017-1.8033-4.3116-4.8161-4.3116-8.0566v-10.849h49.529v10.849c0 3.2406-1.6099 6.2533-4.3116 8.0566l-9.4524 6.3017c-4.671 3.1163-7.4625 8.3331-7.4625 13.944z"/>
          <path fill="#fff" d="m102.12 118.39c-1.2576-0.93963-2.9849-0.93963-4.2425 0l-15.568 11.677v2.0047h35.378v-2.0047z"/>
        </svg>
        <svg *ngIf="item.thumbnail == 'svg_nothing'" width="200" height="200" version="1.1" viewBox="0 0 200 200" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
          <rect width="200" height="200" fill="#007aff"/>
          <path d="m144.19 144.19a62.5 62.5 0 0 1-88.388 0 62.5 62.5 0 0 1 1e-6 -88.388 62.5 62.5 0 0 1 88.388 0 62.5 62.5 0 0 1 0 88.388z" fill="none" stroke="#fff" stroke-width="20"/>
          <path d="m55.806 55.806 88.388 88.388" fill="none" stroke="#fff" stroke-width="20"/>
        </svg>
      </div>

      <div style="width: 100%;">
        <div class="title-line">
          <b>{{item.name}}</b>
          <div *ngIf="isReal(item.thumbnail) && item.ownedByMe" class="like-widget">
            <button pButton type="button" class="p-button-danger" icon="pi pi-trash" (click)="deleteBlueprint(item)" i18n-pTooltip pTooltip="Delete this blueprint"></button>
            <!--
            <app-like-widget
              [blueprintId]="item.id"
              [nbLikes]="item.nbLikes"
              [likedByMe]="item.likedByMe"
              [disabled]="!authService.isLoggedIn() || item.thumbnail == 'svg'">
            </app-like-widget>
            -->
          </div>
        </div>
        <br>

        <div *ngIf="isReal(item.thumbnail)" i18n>Author :&nbsp;<a [routerLink]="" (click)="filterOwner(item.ownerId, item.ownerName)">{{item.ownerName}}</a></div>
        <div *ngIf="isReal(item.thumbnail)" i18n>Created : {{this.datepipe.transform(item.createdAt, 'yyyy-MM-dd')}}</div>
        <div *ngIf="isReal(item.thumbnail)" i18n>Modified : {{this.datepipe.transform(item.modifiedAt, 'yyyy-MM-dd')}}</div>
      </div>
    </div>

  </div>

</p-dialog>
